<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="app">
        <!--{{firstName+" "+lastName}}-->
        {{fullName}}
        {{age}}
    </div>

    <script>
        var vm=new Vue({
            el:"#app",
            data:{
                firstName:"Dell",
                lastName:"Lee",
                fullName:"Dell Lee",
                age:28
            },
//            方法一
            //计算属性 内置缓存机制,如lastName和firstName发生变化才调用计算属性
            //计算属性 性能高
//            computed:{
//                fullName: function () {
//                    console.log("计算了一次");
//                    return this.firstName+" "+this.lastName;
//                }
//            },
//            方法二
//            methods:{
//                fullName: function () {
//                    console.log("计算了一次");
//                    return this.firstName+" "+this.lastName
//                }
//            },
//            方法三
            watch:{
                firstName: function () {
                    console.log("计算了一次");
                    this.fullName=this.firstName+" "+this.lastName;
                },
                lastName: function () {
                    console.log("计算了一次");
                    this.fullName=this.firstName+" "+this.lastName;
                }
            }
        })
    </script>
</body>
</html>